import React from 'react'
import {Outlet,NavLink} from 'react-router-dom'
import { mainRoutes } from '../router/RouterConfig'
import { Tabbar } from 'react-vant';
function Index() {
  return (
    <div>
        <header>

        </header>
        <main>
            <Outlet/>
        </main>
        <footer>
            <div className='demo-tabbar'>
                <Tabbar>
                    {
                        mainRoutes.map((item,index)=>(
                            <Tabbar.Item key={index} >
                                
                                <NavLink to={item.path}>{item.title}</NavLink>
                            </Tabbar.Item>
                        ))
                    }
                {/* <Tabbar.Item icon={<HomeO />}>标签</Tabbar.Item>
                <Tabbar.Item icon={<Search />}>标签</Tabbar.Item>
                <Tabbar.Item icon={<FriendsO />}>标签</Tabbar.Item>
                <Tabbar.Item icon={<SettingO />}>标签</Tabbar.Item> */}
                </Tabbar>
            </div>
        </footer>
    </div>
  )
}

export default Index